<template>
	<view>
		<view class="w-100 d-flex a-center border-top border-bottom text-muted font-md" style="height: 88rpx;">
			<view class="flex-1 d-flex a-center j-center" :class="{ 'main-text-color': screen.currentIndex === i }" v-for="(item, i) in screen.list" :key="i" @tap="itemClick(i)">
				{{ item.name }}
				<view class="text-light-muted">
					<view class="iconfont icon-paixu-shengxu line-h0 " :class="{ 'main-text-color': item.status === 1 }" />
					<view class="iconfont icon-paixu-jiangxu line-h0" :class="{ 'main-text-color': item.status === 2 }" />
				</view>
			</view>
			<view class="flex-1 d-flex a-center j-center main-text-color" @tap="showRight = true">筛选</view>
		</view>

		<!-- 商品列表 -->
		<block v-for="(item, i) in goodList" :key="i">
			<goodsItem :item="item" :index="i"/>
		</block>

		<!-- 抽屉 -->
		<uni-drawer :visible="showRight" mode="right" @close="showRight = false">
			<!-- 单选区 -->
			<card headTitle="服务" :showH="true" :showBorderBom="false" :TitleWeight="false"><JradioGroup :radioList="radioList" :currentIndex.sync="radioList.currentIndex" /></card>
			<!-- 底部按钮 -->
			<view class="w-100 position-fixed bottom-0 left-0 right-0 d-flex border-top border-light">
				<view class="flex-1 py-2 text-center" hover-class="bg-light-secondary">重置</view>
				<view class="flex-1 py-2 text-center main-bg-color text-white" @tap="showRight = false" hover-class="main-bg-hover-color">确认</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
import uniDrawer from '@/components/uni/uni-drawer/uni-drawer.vue';
import card from '@/components/common/card.vue';
import JradioGroup from '@/components/common/radio_group.vue';
import goodsItem from '@/components/seachList/goodsItem.vue';
export default {
	components: {
		uniDrawer,
		card,
		JradioGroup,
		goodsItem
	},
	data() {
		return {
			goodList: [
				{
					title: '真无线蓝牙耳机',
					imgUrl: '/static/images/demo/demo6.jpg',
					describe: '简雅节约 / 简雅节约 / 简雅节约 / 简雅节约 / 简雅节约',
					pprice: 999,
					commentNum: 1300,
					goodsNum: '99%'
				},
				{
					title: '真无线蓝牙耳机',
					imgUrl: '/static/images/demo/demo1.jpg',
					describe: '简雅节约 / 简雅节约 / 简雅节约 / 简雅节约 / 简雅节约',
					pprice: 999,
					commentNum: 1300,
					goodsNum: '99%'
				},
				{
					title: '真无线蓝牙耳机',
					imgUrl: '/static/images/demo/demo2.jpg',
					describe: '简雅节约 / 简雅节约 / 简雅节约 / 简雅节约 / 简雅节约',
					pprice: 999,
					commentNum: 1300,
					goodsNum: '99%'
				},
				{
					title: '真无线蓝牙耳机',
					imgUrl: '/static/images/demo/demo3.jpg',
					describe: '简雅节约 / 简雅节约 / 简雅节约 / 简雅节约 / 简雅节约',
					pprice: 999,
					commentNum: 1300,
					goodsNum: '99%'
				},
				{
					title: '真无线蓝牙耳机',
					imgUrl: '/static/images/demo/demo4.jpg',
					describe: '简雅节约 / 简雅节约 / 简雅节约 / 简雅节约 / 简雅节约',
					pprice: 999,
					commentNum: 1300,
					goodsNum: '99%'
				},
				{
					title: '真无线蓝牙耳机',
					imgUrl: '/static/images/demo/demo5.jpg',
					describe: '简雅节约 / 简雅节约 / 简雅节约 / 简雅节约 / 简雅节约',
					pprice: 999,
					commentNum: 1300,
					goodsNum: '99%'
				},
				{
					title: '真无线蓝牙耳机',
					imgUrl: '/static/images/demo/demo6.jpg',
					describe: '简雅节约 / 简雅节约 / 简雅节约 / 简雅节约 / 简雅节约',
					pprice: 999,
					commentNum: 1300,
					goodsNum: '99%'
				},
				{
					title: '真无线蓝牙耳机',
					imgUrl: '/static/images/demo/demo7.jpg',
					describe: '简雅节约 / 简雅节约 / 简雅节约 / 简雅节约 / 简雅节约',
					pprice: 999,
					commentNum: 1300,
					goodsNum: '99%'
				}
			],
			showRight: false,
			screen: {
				currentIndex: 0,
				list: [{ name: '综合', status: 1 }, { name: '销量', status: 0 }, { name: '价格', status: 0 }]
			},
			radioList: {
				currentIndex: 0,
				list: [{ name: '按钮1' }, { name: '按钮2' }, { name: '按钮3' }, { name: '按钮4' }, { name: '按钮5' }, { name: '按钮6' }]
			}
		};
	},
	methods: {
		itemClick(i) {
			const currentIndex = this.screen.currentIndex;
			const itemdata = this.screen.list[currentIndex];
			if (currentIndex === i) {
				return (itemdata.status = itemdata.status === 1 ? 2 : 1);
			}
			itemdata.status = 0;
			this.screen.currentIndex = i;
			this.screen.list[i].status = 1;
		}
	}
};
</script>

<style scoped lang="scss">
.radio_active {
	color: #eb7320 !important;
	background-color: #fce0d5 !important;
	border-color: #eb7320 !important;
}
</style>
